<!--
  author: tangcheng_cd
  create by: 2018/6/8
  descr: 物理表管理
-->
<template>
  <div id="metaTableManager">
    <v-header title="物理表" :showDownloadBtn="false" :saveShow="false"></v-header>
    <el-container class="event-manage-box">
      <el-header class="header-tool-bar" height="50px">
        <!--工具栏-->
        <el-row>
          <el-button type="primary" size="mini" @click.left.stop="addBtnClicked">增加</el-button>
          <el-button type="primary" size="mini" @click.left.stop="delBtnClicked">删除</el-button>
          <el-button type="primary" size="mini" @click.left.stop="editBtnClicked">编辑</el-button>
          <el-button type="primary" size="mini" @click.left.stop="refreshBtnClicked">刷新</el-button>
          <span class="conditionquery">
          <el-input v-model="searchKeyword" size="mini" prefix-icon="el-icon-search" placeholder="请输入内容"
                    clearable></el-input>
          <el-button type="primary" size="mini" @click="queryBtnClicked">查询</el-button>
        </span>
        </el-row>
      </el-header>
      <el-main class="main-table-box">
        <meta-table-grid ref="dataGrid" checkbox></meta-table-grid>
      </el-main>
    </el-container>
    <meta-table-add-modify-panel ref="addModifyPanel"
                                 @submitAfter="addModifyPanelSubmitAfter"></meta-table-add-modify-panel>
  </div>
</template>

<script>
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  import {VHeader} from '../../../../components'
  import Msg from '../../../../assets/js/msg'
  import MetaTableGrid from './metaTable'
  import MetaTableAddModifyPanel from './metaTableAddModifyPanel'

  export default {
    name: 'meta-data-pkg-manager',
    components: {
      MetaTableAddModifyPanel,
      MetaTableGrid,
      VHeader
    },
    data () {
      return {
        searchKeyword: null
      }
    },
    methods: {
      // 新增按钮被点击
      addBtnClicked () {
        this.$refs.addModifyPanel.addShow()
      },
      // 编辑按钮被点击
      editBtnClicked () {
        let selections = this.$refs.dataGrid.getSelections()
        if (selections && selections.length === 0) {
          this.$message.error('请选择一条记录进行编辑!')
        } else if (selections.length > 1) {
          this.$message.error('只能选择一条记录进行编辑!')
        } else if (selections.length === 1) {
          let selection = selections[0]
          this.$refs.addModifyPanel.editShow(selection)
        }
      },
      // 删除按钮被点击
      delBtnClicked () {
        let selections = this.$refs.dataGrid.getSelections()
        if (selections && selections.length > 0) {
          Msg.confirm('是否删除所选记录?', {
            onConfirm: () => {
              ajax.post(api.DELETE_METATABLE, {
                key_list: selections
              }).then(res => {
                // 清除选择
                this.$refs.dataGrid.clearSelections()
                // 刷新数据
                this.$refs.dataGrid.getData()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
              }).catch(e => {
                 this.$message({
                  type: 'error',
                  message: '删除失败!'
                })
                console.error('删除记录发生错误！', e)
              })
            },
            onCancel () {
              // 空的实现也需要的，否则控制台有错误
            }
          })
        } else {
          this.$message.error('请选择一条记录进行删除')
        }
      },
      // 刷新按钮被点击
      refreshBtnClicked () {
        this.$refs.dataGrid.getData()
      },
      // 查询按钮被点击
      queryBtnClicked () {
        // 通过关键字搜索
        this.$refs.dataGrid.getDataByKeyword(this.searchKeyword)
      },
      // 新增修改面板提交后处理
      addModifyPanelSubmitAfter (dialog) {
       if (dialog.dialogMode === 'ADD') {
         this.$message({
           type: 'success',
           message: '增加成功！'
         })
       } else {
         this.$message({
           type: 'success',
           message: '编辑成功！'
         })
       }
        // 刷新表格数据
        this.$refs.dataGrid.getData()
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #metaTableManager
    height 100%
    position relative
    .event-manage-box
      height 100%
      padding 10px 0px 20px 10px
      .header-tool-bar
        line-height 50px
        vert-align middle
        background-color #FFFFFF
        margin-bottom 3px
        .conditionquery
          width 300px
          float right
          margin-right -10px
        .el-input--mini
          width 200px
        .el-button--danger
          background-color #016DFB
          border-color #016DFB
        .dialog-input
          width 210px
          height 30px
          border-radius 4px
          border 1px solid #D8DCE5
      .main-table-box
        height 100%
        padding 0px 0px
</style>
